<template>
  <component
    :is="componentType"
    :value="formItemConfig.value"
    v-bind="modifyProps"
    :prop-key="modifyPropKey"
  >
    <template v-if="formItemConfig.slotAppend" slot="append">append </template>
    <template v-if="formItemConfig.slotPrepend" slot="prepend">
      prepend
    </template>
    <component
      :is="componentOption.optionType"
      v-for="opt in componentOption.options"
      :key="opt[componentOption.valueKey]"
      :label="opt[componentOption.labelKey]"
      :value="opt[componentOption.valueKey]"
      :disabled="opt.disabled"
      :class="{ active: opt.value === selectKey }"
    >
      <template v-if="isContainer"></template>
      <span v-else> {{ opt[componentOption.textKey] }}</span>
    </component>
  </component>
</template>
<script>
import { optionTypeMap } from "@/utils/constant";
export default {
  props: {
    propKey: String,
    formItemConfig: Object,
    value: [Number, Object, String, Date, Array, Boolean],
  },
  data() {
    return {};
  },
  computed: {
    props() {
      return this.formItemConfig.props;
    },
    componentType() {
      return this.formItemConfig.type;
    },
    modifyProps() {
      const props = JSON.parse(JSON.stringify(this.formItemConfig.props || {}));
      // TODO placeholder
      return props;
    },
    modifyPropKey() {
      if (this.componentType === "el-tabs") {
        return this.propKey + "ActiveTab";
      }
      return this.propKey;
    },
    // 该组件是否为容器组件
    isContainer() {
      return this.formItemConfig.isContainer;
    },
    // 组件插槽
    componentOption() {
      const componentOption = {
        textKey: "text",
        valueKey: "value",
        labelKey: "label",
      };
      if (this.isContainer) {
        // TODO
      } else {
        if (
          ["el-radio-group", "el-checkbox-group"].includes(this.componentType)
        ) {
          // TODO
          componentOption.textKey = this.props?.textKey || "label";
          componentOption.valueKey = this.props?.valueKey || "value";
          componentOption.labelKey = this.props?.labelKey || "label";
        }
        componentOption.options = this.props?.options || [];
        // this.props && this.props.options ? this.props.options : [];
      }

      componentOption.optionType = optionTypeMap[this.componentType] || "div";

      return componentOption;
    },
  },
};
</script>
